<template>

  <div>
    <el-card class="box-card">
      <div>
        <el-card class="box-card">
          <div>
            <!-- 搜索头 -->
            <el-page-header @back="goBack" content="账户信息">
            </el-page-header>
            <p>
              <el-input v-model="orderNumber" placeholder="请输入搜索内容" style="width:300px;border-right: 0px;"></el-input>
              <el-button @click="listManuFacturerOrders"  icon="el-icon-search"></el-button>
              <span style="font-size: 10px;margin-left:10px">交易类型: </span>
              <el-select v-model="payType" @change="listManuFacturerOrders" placeholder="请选择" style="width: 130px">
                <el-option value="0" label="全部" checked>全部</el-option>
                <el-option value="1" label="充值">充值</el-option>
                <el-option value="2" label="提现">提现</el-option>
              </el-select>
            </p>
            <!-- 搜索头 -->
            <el-row :span="19" type="flex">
              <el-col>
                <el-table
                    :data="listManuFacturerOrdersForm"
                    style="width: 100%;height:650px">
                  <el-table-column
                      prop="id"
                      label="编号"
                      width="60">
                  </el-table-column>
                  <el-table-column
                      prop="manuFacturer.manufacturerName"
                      label="厂商名称"
                      width="160">
                  </el-table-column>
                  <el-table-column
                      prop="orderNumber"
                      label="交易流水号"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      label="交易类型"
                      width="100">
                    <template slot-scope="scope">
                      <span>{{scope.row.payType===1?"充值":scope.row.payType===2?"提现":"暂无"}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="orderMonery"
                      label="交易金额/元"
                      width="100">
                  </el-table-column>
                  <el-table-column
                      label="交易渠道"
                      width="100">
                    <template slot-scope="scope">
                      <span>{{scope.row.payForm===0?"支付宝":scope.row.payForm===1?"微信":"银行卡"}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="createTime"
                      label="交易时间"
                      value-format="yyyy-MM-dd"
                      width="160">
                  </el-table-column>
                  <el-table-column
                      prop="customerName"
                      label="操作人"
                      width="100">
                  </el-table-column>
                  <el-table-column
                      prop="manufacturerCode"
                      label="操作"
                      width="100">
                    <template slot-scope="scope">
                      <span style="color: blue;cursor: pointer" @click="getListOrder(scope.row)">查看明细</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <!-- 分页开始 -->
            <div class="block" style="margin-top: 20px;">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20]"
                  :page-size=pageSize
                  layout="total, sizes, prev, pager, next, jumper"
                  :total=total>
              </el-pagination>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
    <!--详情-->
    <el-dialog
        title="厂商订单"
        :visible.sync="ListOrderFacturerCodeWindow"
        width="70%"
        :before-close="handleClose">
      <div id="Box1">
        <el-empty description="暂无订单" :image-size="200" v-if="noFilesShow"></el-empty>
        <el-button type="primary" @click="exportOrderList" v-if="!noFilesShow">导出</el-button>
        <el-table
            v-if="!noFilesShow"
            :data="OrdersById"
            style="width: 100%;">
          <el-table-column
              prop="id"
              label="订单流水号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="customerName"
              label="客户名称"
              width="80">
          </el-table-column>
          <el-table-column
              prop="customerPhone"
              label="客户电话"
              width="140">
          </el-table-column>
          <el-table-column
              prop="amountPayable"
              label="订单金额"
              width="100">
          </el-table-column>
          <el-table-column
              label="省市区"
              width="160">
              <template slot-scope="scope">
                <span>{{scope.row.province}} {{scope.row.city}} {{scope.row.area}}</span>
              </template>
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
              width="170">
          </el-table-column>
          <el-table-column
              prop="completeTime"
              label="交易时间"
              width="130">
          </el-table-column>
          <el-table-column
              label="质保标志"
              width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.qualityAssurance===0" style="color: green">保内</span>
              <span v-if="scope.row.qualityAssurance===1" style="color: red">保外</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页开始 -->
      <div class="block" style="margin-top: 20px;">
        <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size=pageSize2
            layout="total, sizes, prev, pager, next, jumper"
            :total=total2>
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ListOrderFacturerCodeWindow = false" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <!--详情-->
  </div>

</template>

<script>

export default {
  data () {
    return{
      pageSize: 5,
      pageSize2: 5,
      pageNum: 1,
      pageNum2: 1,
      total2: 0,
      total: 0,
      currentPage: 0,
      noFilesShow: true,
      ListOrderFacturerCodeWindow: false,
      payType: '', // 消费类型
      orderNumber: '', // 流水号
      manuFactureId: '', // 厂商id
      listManuFacturerOrdersForm: [], // 厂商订单全查
      OrdersById: [], // 订单详情
      listFacturerName: [], // 全部厂商名称
      outPutForm: {
        id: '',
        date: ''
      }
    }
  },
  mounted() {
    this.getRouterId()
    this.listManuFacturerOrders()
  },
  methods:{
    myMessage (type, message) { // 弹窗提示
      this.$message({
        message: message,
        type: type
      })
    },
    getListOrder(data){ // 查看明细
      this.request.get('/memberZjx/orderTable/listById',{
        params:{
          id: data.id,
          date: data.createTime,
          pageNum: this.pageNum2,
          pageSize: this.pageSize2
        }
      }).then(res => {
        this.outPutForm.id = data.id
        this.outPutForm.date = data.createTime
          console.log(res.data.total)
          if(res.data.total !== 0){
            this.noFilesShow = false
            this.OrdersById = res.data.records
            this.total2 = res.data.total
          }
      })
      this.ListOrderFacturerCodeWindow = true
    },
    goBack () {
      this.$router.push('ManuFacturer')
    },
    getRouterId () {
        this.manuFactureId = this.$route.query.id
    },
    exportOrderList () {
      var ids = this.outPutForm.id;
      var dates = this.outPutForm.date;
      // window.open('/memberZjx/orderTable/export/'+ids+'/'+dates)
      console.log(this.OrdersById)
      this.request.get('/memberZjx/orderTable/export',{
        params: {
          id: this.outPutForm.id,
          date: this.outPutForm.date
        }
      }).then(res => {
        if (res){
          this.myMessage('success','玩命导出中')
          const div = document.createElement('divform')
          div.innerHTML = res.data.obj
          document.body.appendChild(div)
          document.forms[0].setAttribute('target', '_blank')
          document.forms[0].submit()
          json.open('res')
        }
      })
    },
    listManuFacturerOrders(){ // 自行注册厂商未签约全查
      this.request.get('/memberZjx/vendor/list',{
        params: {
          manuFactureId: this.manuFactureId,
          payType: this.payType,
          orderNumber: this.orderNumber,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
      }).then(res=>{
        if (res){
          this.listManuFacturerOrdersForm = res.data.records
          this.total =  res.data.total
        }else{
          alert("失败！")
        }
      })
    },
    handleSizeChange (val) { // 页码
      this.pageSize = val
      this.listManuFacturer()
    },
    handleCurrentChange (val) { // 页数
      this.pageNum = val
      this.listManuFacturer()
    },
    handleSizeChange2 (val) { // 页码
      this.pageSize2 = val
      this.getListOrder()
    },
    handleCurrentChange2 (val) { // 页数
      this.pageNum2 = val
      this.getListOrder()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }

}

</script>

<style>
#Box1{
  width: 100%;
  height: 500px;
}
</style>
